<template>
  <div class="register-container">
    <div class="register-box">
      <div class="register-title">密码重置</div>
      <div class="register-form">
        <form>
          <!-- 用户名输入框
                      <div class="form-item">
                          <input
                              userId="username"
                              class="form-input"
                              type="text"
                              placeholder=""
                              v-model="username"
                          />
                          <label class="input-label">用户名</label>
                      </div> -->
          <!-- 邮箱输入框 -->
          <div class="form-item email-item">
            <input
              id="email"
              class="form-input email-input"
              type="email"
              placeholder=""
              v-model="email"
            />
            <label class="input-label">邮箱</label>
            <button class="send-code-btn" @click.prevent="sendVerificationCode">
              发送验证码
            </button>
          </div>
          <!-- 邮箱验证码输入框 -->
          <div class="form-item">
            <input
              id="email-verification-code"
              class="form-input"
              type="text"
              placeholder=""
              v-model="verificationCode"
            />
            <label class="input-label">邮箱验证码</label>
          </div>
          <!-- 密码输入框 -->
          <div class="form-item">
            <input
              id="password"
              class="form-input"
              type="password"
              placeholder=""
              v-model="password"
            />
            <label class="input-label">新密码</label>
          </div>
          <!-- 确认密码输入框 -->
          <div class="form-item">
            <input
              id="confirm-password"
              class="form-input"
              type="password"
              placeholder=""
              v-model="confirmPassword"
            />
            <label class="input-label">确认密码</label>
          </div>

          <!-- 注册按钮 -->
          <div class="form-item">
            <button type="button" class="register-btn" @click="handleRegister">
              重设密码
            </button>
          </div>

          <!-- 已有账号去登录链接 -->
          <div class="have-account">
            <span>又想起来了？</span>
            <a href="#" @click.prevent="handleGoToLogin">去登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// import ContentFiled from "@/components/ContentFiled.vue";
import { ref } from "vue";
import router from "@/router/index";
import $ from "jquery";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

export default {
  components: {
    // ContentFiled,
  },

  setup() {
    let username = ref("");
    let email = ref("");
    let password = ref("");
    let confirmPassword = ref("");
    let verificationCode = ref("");
    const store = useStore();

    const handleRegister = () => {
      console.log(email.value);
      if (
        email.value != null &&
        password.value != null &&
        password.value != confirmPassword.value
      ) {
        ElMessage.error("俩个密码不一样");
        return;
      }
      $.ajax({
        url: "http://10.70.128.53:7090/api/user/forgetPwd",
        type: "post",
        contentType: "application/json", // 设置请求头
        data: JSON.stringify({
          email: email.value,
          newPassword: password.value,
          verificationCode: verificationCode.value,
        }),
        success(resp) {
          if (resp.status === "success") {
            ElMessage.success(resp);
            store.commit("updateEmail", email.value);
            store.commit("updatePassword", password.value);
            router.push({ name: "user_account_login" });
          } else {
            ElMessage.error(resp);
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    };
    const sendVerificationCode = () => {
      console.log(email.value);
      // 在这里处理发送验证码逻辑
      $.ajax({
        url: "http://10.70.128.53:7090/api/email/send",
        type: "post",
        contentType: "application/json", // 设置请求头
        data: JSON.stringify({
          email: email.value,
          type: "1",
        }),
        success(resp) {
          if (resp.status === "success") {
            ElMessage.success(resp);
          } else {
            ElMessage.error(resp);
          }
        },
        error(resp) {
          console.log(resp);
        },
      });

      // console.log('发送验证码到邮箱：', email.value);
    };
    const handleGoToLogin = () => {
      // 在这里处理跳转到登录页面的逻辑
      // console.log('用户点击了去登录');
      router.push("/user/account/login/");
    };
    return {
      username,
      password,
      confirmPassword,
      handleRegister,
      sendVerificationCode,
      handleGoToLogin,
      email,
      verificationCode,
    };
  },
};
</script>

<style scoped>
/* 页面居中样式 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.register-box {
  width: 400px;
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(5, 5, 5, 0.11);
}

.register-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
  font-weight: 800;
}

/* 注册表单样式 */
.register-form .form-item {
  margin-bottom: 20px;
}

.form-item {
  position: relative;
}

.email-item {
  display: flex;
  align-items: center;
}

.email-input {
  width: calc(100% - 90px); /* 减去发送验证码按钮的宽度 */
}

.send-code-btn {
  width: 150px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px; /* 添加左边距以分开输入框和按钮 */
}

.send-code-btn:hover {
  background-color: #0056b3;
}

.input-label {
  position: absolute;
  font-size: 15px;
  top: 55%;
  left: 10px;
  transform: translateY(-50%);
  background-color: white; /* 防止标签遮挡输入文字 */
  color: #aaa;
  pointer-events: none; /* 确保点击标签不会干扰输入框 */
  transition: all 0.1s ease;
}

.form-input:focus + .input-label,
.form-input:not(:placeholder-shown) + .input-label {
  top: 5%;
  font-size: 15px;
  font-weight: bold;
  color: #007bff; /* 改变颜色以突出显示 */
}
.form-input {
  width: 100%;
  height: 40px;
  padding: 20px 20px 20px 10px; /*上右下左*/
  margin-top: 5px;
  box-sizing: border-box; /* 确保宽度包含 padding 和 border */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.form-input::placeholder {
  color: #aaa;
}

.have-account {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.have-account a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.have-account a:hover {
  text-decoration: underline;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.register-btn:hover {
  background-color: #0056b3;
}

.register-btn:focus {
  outline: none;
}
</style>
